<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue';
// 在js中引入所需的主题和组件
import tinymce from 'tinymce/tinymce';

import 'tinymce/themes/silver';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default'; // 引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/models/dom'; // 引入dom模型，不引入则报错 这里是个坑 一定要引入

// 在TinyMce.vue中接着引入相关插件
import 'tinymce/icons/default/icons'; // 引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/plugins/image'; // 插入上传图片插件
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/link'; // 插入链接插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/code'; // 源码
import 'tinymce/plugins/codesample'; // 源码
import 'tinymce/plugins/emoticons'; // 表情

// 接下来定义编辑器所需要的插件数据
import { onMounted, reactive, ref, watch } from 'vue';

import { uploadApi } from '../api/core/user';

// 这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
  value: {
    type: String,
    default: () => {
      return '';
    },
  },
  baseUrl: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: () => [
      'lists',
      'table',
      'image',
      'link',
      'code',
      'emoticons',
      'codesample',
    ],
  }, // 必填
  toolbar: {
    type: [String, Array],
    default:
      'undo redo | fontfamily fontsize codesample bold italic underline strikethrough underline emoticons forecolor backcolor | alignleft aligncenter alignright alignjustify lineheight indent outdent bullist numlist |lists link table image | subscript superscript blockquote | removeformat codesample code ',
  }, // 必填
});
// 抛给父类的事件
const emits = defineEmits(['getContent']);
// 用于接收外部传递进来的富文本
const myValue = ref(props.value);
const tinymceId = ref(
  `vue-tinymce-${Date.now()}${(Math.random() * 1000).toFixed(0)}`,
);
// 定义一个对象 init初始化
const init = reactive({
  apiKey: 'e6ijeygd8nbgokohwdulocuwjmto5rurz7h9sdunqel6tg12', // tinymce的api key
  license_key: 'gpl',
  placeholder: '请输入内容',
  selector: `#${tinymceId.value}`, // 富文本编辑器的id,
  language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
  language: 'zh_CN', // 语言
  skin_url: '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
  // height: 400, //编辑器高度
  max_height: 1800,
  min_height: 600,
  branding: false, // 是否禁用“Powered by TinyMCE” 右下角logo
  menubar: false, // 顶部菜单栏显示
  statusbar: true, // 底部状态栏显示
  resize: true, // 禁止改变大小
  elementpath: false, // 隐藏元素路径
  plugins: props.plugins, // 这里的数据是在props里面就定义好了的
  toolbar: props.toolbar, // 这里的数据是在props里面就定义好了的
  line_height_formats: '1 1.2 1.4 1.5 1.7 2', // 行高
  toolbar_mode: 'wrap', // 工具栏模式
  // 有点坑爹这里 不手动复制一份引入表情库 会报找不到位置 导致表情包出不来
  emoticons_database_url: '/tinymce/plugins/emoticons/js/emojis.js', // 表情库路径
  font_family_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats', // 字体
  font_size_formats:
    '11px 12px 14px 16px 18px 24px 28px 32px 36px 48px 64px 72px', // 文字大小
  font_size: '14px', // 设置字体大小选择框的默认值为14px
  content_style: 'body { font-size: 14px; }', // 设置编辑器内容的默认字体大小为14px
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  paste_webkit_styles: 'all', // 粘贴时保留样式
  paste_merge_formats: true, // 合并格式
  nonbreaking_force_tab: false, // 禁止插入空格
  paste_auto_cleanup_on_paste: false, // 禁止粘贴自动清理
  file_picker_types: 'file', // 只允许上传文件
  content_css: '/tinymce/skins/content/default/content.css', // 以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  image_dimensions: false, // 去除宽高属性
  images_file_types: 'jpg,svg,webp,png,jpeg,gif,bmp,ico', // 允许上传图片类型
  // 图片上传 progress: any,
  images_upload_handler: (blobInfo: { blob: () => Blob }) =>
    new Promise((resolve, reject) => {
      const params = new FormData();
      params.append('file', blobInfo.blob());
      uploadApi(params)
        .then((res) => {
          resolve(res.data.url);
        })
        .catch((error) => {
          reject(error);
        });
    }),
});

// 监听外部传递进来的的数据变化
watch(
  () => props.value,
  () => {
    myValue.value = props.value;
    emits('getContent', myValue.value);
  },
);
// 监听富文本中的数据变化
watch(
  () => myValue.value,
  () => {
    emits('getContent', myValue.value);
  },
);
// 在onMounted中初始化编辑器
onMounted(() => {
  tinymce.init({});
});
</script>

<template>
  <Editor :id="tinymceId" v-model="myValue" :disabled="disabled" :init="init" />
</template>

<style scoped>
@import 'tinymce/skins/content/default/content.css';
</style>
